<template>
    <div class="view" ref="matchmakerSingleMarket">
        <div class="box">
            <div class="search-nav">单身市场
                <div class="search-btn" @click="selectDrwaerHandle">搜索</div>
            </div>
            <cube-scroll class="scroll" ref="scroll" :scroll-events="['scroll']"
                         :data="singles"
                         :options="scrollOptions"
                         @pulling-down="onPullingDown"
                         @pulling-up="onPullingUp">
                <div class="tag-list">
                    <span>搜索条件：</span>
                    <span class="tag" v-for="(tag,index) in tagList" :key="index">{{tag}}</span>
                </div>
                <div class="none-single" v-if="singles.length==0">
                    暂无单身市场!
                </div>
                <ul class="list-wrapper">
                    <li v-for="(item, index) in singles" class="list-item flex" :key="index" @click="toPage('singleInfo',{friendId:item.user_id,index:index})">
                        <div class="avatar">
                            <img :src="item.avatar&&item.avatar.file_status.status?item.avatar.file_path+'?imageView2/0/w/70':filePath">
                        </div>
                        <div class="info">
                            <div class="nickname ellipsis">{{item.nickName}}
                                <svg class="svg-icon huangguan" aria-hidden="true">
                                    <use :xlink:href="item.gender==1?'#icon-chinese':item.gender==2?'#icon-xinniang':'#icon-nicheng'"></use>
                                </svg>
                            </div>
                            <div class="rank">{{item.rank_name}}
                                <svg class="svg-icon huangguan" aria-hidden="true">
                                    <use :xlink:href="item.user_rank==1?'#icon-putong':item.user_rank==2?'#icon-VIPhuangguan':'#icon-huiyuan'"></use>
                                </svg>
                            </div>
                            <div class="factor ellipsis">
                                <span class="age" v-if="!(item.age=='未知'||item.age==0)">{{item.age+'岁'}}</span>
                                <span class="height" v-if="item.user_info.SNAP_HEIGHT!=='未填写'">{{item.user_info.SNAP_HEIGHT}}</span>
                                <span class="home" v-if="!(item.snap_city_id=='未填写'||item.snap_city_id=='')">{{item.snap_city_id}}</span>
                            </div>
                            <div class="hobby ellipsis" v-if="item.user_info.SNAP_HOBBY!=='未填写'">
                                {{item.user_info.SNAP_HOBBY}}
                                <!--                                <span v-for="item in item.user_info.SNAP_HOBBY.split(',')">{{item}}</span>-->
                            </div>
                            <div class="intro ellipsis">{{item.user_info.INTRODUCTION}}</div>
                        </div>
                        <div class="handle apply" @click.stop="applyMatch(item.user_id,index)">申请牵线</div>
                    </li>
                </ul>
            </cube-scroll>
        </div>
        <div :class="'select-drawer '+ (selectDrawerShow?'':'hide')">
            <div class="select-drawer-mask" @click="selectDrwaerHandle"></div>
            <div class="select-drawer-content">
                <div class="select-drawer-content-title">请选择</div>
                <div class="content-box">
                    <div class="car flex" @click="showDiffPicker('年龄区间','mate_age','mate_age_snap','AGE','','mateSelection')">
                        <span>年龄</span>
                        <span class="ellipsis">
                            {{selectValue.mate_age_snap}}
                            <i class="iconfont icon-youbian"></i>
                        </span>
                    </div>
                    <div class="car flex"
                         @click="showDiffPicker('身高区间','mate_height','mate_height_snap','HEIGHT_OPTIONS','','mateSelection')">
                        <span>身高</span>
                        <span class="ellipsis">
                             {{selectValue.mate_height_snap}}
                            <i class="iconfont icon-youbian"></i></span>
                    </div>
                    <div class="car flex"
                         @click="showDiffPicker('学历区间','mate_education','mate_education_snap','EDUCATION_OPTIONS','','mateSelection')">
                        <span>学历</span>
                        <span class="ellipsis">
                             {{selectValue.mate_education_snap}}
                            <i class="iconfont icon-youbian"></i></span>
                    </div>
                    <div class="car flex"
                         @click="showDiffPicker('月收入区间','mate_income','mate_income_snap','INCOME_OPTIONS','','mateSelection')">
                        <span>月收入</span>
                        <span class="ellipsis">
                            {{selectValue.mate_income_snap}}
                            <i class="iconfont icon-youbian"></i>
                        </span>
                    </div>
                    <div class="car flex"
                         @click="showAddressPicker('选择居住地',['mate_province','mate_city'],['mate_province_snap','mate_city_snap'],'mateSelection')">
                        <span>居住地</span>
                        <span class="ellipsis">
                            {{[selectValue.mate_province_snap,selectValue.mate_city_snap].join(',')}}
                            <i class="iconfont icon-youbian"></i></span>
                    </div>
                    <div class="car flex"
                         @click="showCommonPicker('婚姻情况','mate_marital','mate_marital_snap','MARITAL_STATUS_OPTIONS','','mateSelection')">
                        <span>婚姻情况</span>
                        <span class="ellipsis">
                            {{selectValue.mate_marital_snap}}
                            <i class="iconfont icon-youbian"></i></span>
                    </div>
                    <div class="car flex"
                         @click="showCommonPicker('购房情况','mate_housing','mate_housing_snap','HOUSE_PURCHASE_OPTIONS','','mateSelection')">
                        <span>购房情况</span>
                        <span class="ellipsis">
                              {{selectValue.mate_housing_snap}}
                            <i class="iconfont icon-youbian"></i>
                        </span>
                    </div>
                    <div class="car flex"
                         @click="showCommonPicker('子女情况','mate_child','mate_child_snap','CHILD_OPTIONS','','mateSelection')">
                        <span>子女情况</span>
                        <span class="ellipsis">
                              {{selectValue.mate_child_snap}}
                            <i class="iconfont icon-youbian"></i>
                        </span>
                    </div>
                </div>
                <div class="select-drawer-btn" @click="selectSubmit">确定</div>
                <div class="select-drawer-btn  select-drawer-btn-cancel" @click="selectReset">重置</div>


            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch, Inject} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import CommonUnit from "@/unit/CommonUnit";
    import {updateUser} from "@/store/dispatches";
    import UserEntity from "@/entity/UserEntity";
    import AndroidNavBar from "@/components/aui/AndroidNavBar.vue";

    @Component({
        components: {
            AndroidNavBar
        }
    })
    export default class MatchmakerSingleMarket extends Scene {
        private publicPath: string = process.env.BASE_URL;
        private filePath: string = require("@/assets/images/user-no-face.jpg");
        @State("UserStore")
        public user!: InterfaceUser;
        private singles: any[] = [];
        private page: number = 1;
        private size: number = 15;
        private initShow: boolean = false;
        @Inject({
            from: "reload", default: () => {
            }
        })
        private reload !: any;

        private selectDrawerShow: boolean = false;
        private currentKey: string = "";
        private currentSnap: string = "";
        private currentChilrenKey: string = "";
        private diffPicket: any = "";
        private diffDataList: any[] = [];
        private currentKeyArray: string[] = [];
        private currentSnapArray: string[] = [];
        private addressJson: any[] = [];
        private addressPicker: any = "";
        private commonPicker: any = "";
        private selectValue: any = {
            mate_age: "",
            mate_age_snap: "",
            mate_height: "",
            mate_height_snap: "",
            mate_education: "",
            mate_education_snap: "",
            mate_income: "",
            mate_income_snap: "",
            mate_province: "",
            mate_province_snap: "",
            mate_city: "",
            mate_city_snap: "",
            mate_marital: "",
            mate_marital_snap: "",
            mate_housing: "",
            mate_housing_snap: "",
            mate_child: "",
            mate_child_snap: ""
        };
        private tagList: any[] = [];

        private get submitSelectValue(): any {
            const submitSelectValue: any = {};
            if (this.selectValue.mate_age) {
                submitSelectValue.mate_age = this.selectValue.mate_age;
            }
            if (this.selectValue.mate_height) {
                submitSelectValue.mate_height = this.selectValue.mate_height;
            }
            if (this.selectValue.mate_education) {
                submitSelectValue.mate_education = this.selectValue.mate_education;
            }
            if (this.selectValue.mate_income) {
                submitSelectValue.mate_income = this.selectValue.mate_income;
            }
            if (this.selectValue.mate_province) {
                submitSelectValue.mate_province = this.selectValue.mate_province;
            }
            if (this.selectValue.mate_city) {
                submitSelectValue.mate_city = this.selectValue.mate_city;
            }
            if (this.selectValue.mate_marital) {
                submitSelectValue.mate_marital = this.selectValue.mate_marital;
            }
            if (this.selectValue.mate_housing) {
                submitSelectValue.mate_housing = this.selectValue.mate_housing;
            }
            if (this.selectValue.mate_child) {
                submitSelectValue.mate_child = this.selectValue.mate_child;
            }
            return submitSelectValue;
        }

        private activated() {
            if (this.$route.query.temp == "1") {
                this.singles.splice(Number(this.$route.query.index), 1);
            }
        }

        // private created():void{
        //     console.log(this.user.gender,this.user.gender === 0);
        //     if (this.user.gender === 0) {
        //         this.switchTab({name: "mineAvatarAndSex"});
        //     }
        // }

        private get scrollOptions(): any {
            return {
                /* lock x-direction when scrolling horizontally and  vertically at the same time */
                directionLockThreshold: 0,
                pullDownRefresh: {txt: "更新成功"},
                pullUpLoad: {
                    threshold: 0,
                    txt: {more: "", noMore: "没有更多数据了..."},
                    visible: true
                },
                scrollbar: true
            };
        }

        private onPullingDown(): void {
            (this as any).$refs.scroll.forceUpdate();
        }

        private onPullingUp(): void {
            Http.get(this.api.getUserSingleList, {page: this.page, size: this.size, ...this.submitSelectValue}, {token: this.user.token}).then((res) => {
                if (res.code == 1) {
                    if (res.data.data !== []) {
                        this.singles = this.singles.concat(res.data.data);
                        this.page++;
                        this.$nextTick(() => {
                            (this as any).$refs.scroll.refresh();
                            (this as any).$refs.scroll.forceUpdate();
                        });
                    } else if (res.data.data == []) {
                        (this as any).$refs.scroll.forceUpdate();
                    }
                }
            });
        }

        private back(): void {
            this.navigateBack();
        }

        private toPage(name: string, query: any = {}): any {
            this.navigateTo({
                name: name,
                query: query
            });
        }

        private applyMatch(id: number, index: number): void {
            (this as any).$createDialog({
                type: "confirm",
                icon: "cubeic-alert",
                title: "确认申请牵线",
                content: "",
                confirmBtn: {
                    text: "确定",
                    active: true,
                    disabled: false,
                    href: "javascript:;"
                },
                cancelBtn: {
                    text: "取消",
                    active: false,
                    disabled: false,
                    href: "javascript:;"
                },
                onConfirm: () => {
                    let toast = (<any> this).$createToast({
                        time: 0,
                        txt: "申请中...",
                        mask: true
                    }).show();
                    try {
                        Http.post(this.api.addMatchRequestApply, {user_id: id}, {token: this.user.token}).then((res) => {
                            if (res.code === 1) {
                                this.authentication();
                                toast = (<any> this).$createToast({
                                    time: 2500,
                                    txt: "申请成功",
                                    type: "correct",
                                    mask: true,
                                    onTimeout: () => {
                                        this.singles.splice(index, 1);
                                    }
                                }).show();
                            } else {
                                toast.hide();
                                this.globalSingleResultToast(res);
                            }
                        });
                    } catch (e) {
                        toast.hide();
                    }
                },
                onCancel: () => {

                }
            }).show();
        }

        private getSingles(): void {
            this.page = 1;
            let loadToast = (<any> this).$createToast({
                time: 0,
                type: "loading",
                mask: true,
                txt: "加载中..."
            }).show();
            Http.get(this.api.getUserSingleList, {page: this.page, size: this.size, ...this.submitSelectValue}, {token: this.user.token}).then((res) => {
                if (res.code == 1) {
                    loadToast.hide();
                    if (!res.data.data.length) {
                        this.initShow = true;
                    }
                    this.singles = res.data.data;
                    this.page++;
                } else {
                    loadToast.hide();
                    this.globalSingleResultToast(res);
                }
            }).catch((res) => {
                loadToast.hide();
                console.log(res);
                (<any> this).$createToast({
                    time: 2500,
                    type: "error",
                    txt: "网络繁忙,暂无信息!",
                    mask: true,
                    onTimeout: () => {
                        this.navigateBack();
                    }
                }).show();
            });
        }

        private mounted(): void {
            this.getSingles();
            this.commonPicker = (<any> this).$createPicker({
                title: "",
                data: [],
                onSelect: this.selectCommonValue,
            });
        }

        private async showDiffPicker(title: string, key: string, snap: string, type: string, subtitle: string = "", childrenKey: string = ""): Promise<any> {
            this.currentKey = key;
            this.currentSnap = snap;
            this.currentChilrenKey = childrenKey;
            const toast = (<any> this).$createToast({
                time: 0,
                txt: "载入数据中...",
                mask: true
            }).show();
            if (!this.diffPicket) {
                this.diffPicket = (<any> this).$createPicker({
                    title: "",
                    onChange: this.diffValueChange,
                    onSelect: this.diffValueSelect
                });
            }
            const result: any = await Http.get(this.api.getParameterItem, {type});
            this.diffDataList = CommonUnit.resultToPickerData(result.data);
            this.diffPicket.$updateProps({
                title: title,
                data: [this.diffDataList, this.diffDataList],
            });
            toast.hide();
            this.diffPicket.show();
        }

        private diffValueChange(col: number, selectedIndex: number): void {
            if (col === 0) {
                this.diffPicket.setData([this.diffDataList, this.diffDataList.slice(selectedIndex)], [selectedIndex, 0]);
            }
        }

        private diffValueSelect(value: any[], index: number[], text: string[]) {
            if (this.currentChilrenKey === "mateSelection") {
                this.$set(this.selectValue, this.currentKey, value.join(","));
                this.$set(this.selectValue, this.currentSnap, text[0] === text[1] ? text[0] : text.join("～"));
            }

        }

        private async showAddressPicker(title: string, key: string[], snap: string[], childrenKey: string = ""): Promise<any> {
            this.currentKeyArray = key;
            this.currentSnapArray = snap;
            this.currentChilrenKey = childrenKey;

            const toast = (<any> this).$createToast({
                time: 0,
                txt: "载入地区数据",
                mask: true
            }).show();
            let result: any[] = await Http.read(this.api.addressJson);
            if (key.length !== 3) {
                for (let i in result) {
                    for (let j in result[i].children) {
                        delete result[i].children[j].children;
                    }
                }
            }
            if (childrenKey === "mateSelection") {
                const addressJson = result;
                for (let i in addressJson) {
                    addressJson[i].children.unshift({pid: addressJson[i].value, text: "不限", value: -1});
                }

            }
            this.addressJson.push(...result);
            toast.hide();
            this.addressPicker = (<any> this).$createCascadePicker({
                title: title,
                data: result,
                onSelect: this.addressSelect,
            });

            this.addressPicker.show();
        }

        private selectCommonValue(value: any[], index: number[], text: string[]) {
            if (this.currentChilrenKey === "mateSelection") {
                this.$set(this.selectValue, this.currentKey, value.join(","));
                this.$set(this.selectValue, this.currentSnap, text.join(","));
            }
        }

        private addressSelect(value: any[], index: number[], text: string[]) {
            if (this.currentChilrenKey === "mateSelection") {
                this.$set(this.selectValue, "mate_province", value[0]);
                this.$set(this.selectValue, "mate_city", value[1]);
                this.$set(this.selectValue, "mate_province_snap", text[0]);
                this.$set(this.selectValue, "mate_city_snap", text[1]);
            }

        }

        private selectSubmit() {
            this.getSingles();
            this.getTagText();
            this.selectDrwaerHandle();
        }

        private selectReset() {
            this.selectValue = {
                mate_age: "",
                mate_age_snap: "",
                mate_height: "",
                mate_height_snap: "",
                mate_education: "",
                mate_income: "",
                mate_income_snap: "",
                mate_province: "",
                mate_province_snap: "",
                mate_city: "",
                mate_city_snap: "",
                mate_marital: "",
                mate_marital_snap: "",
                mate_housing: "",
                mate_housing_snap: "",
                mate_child: "",
                mate_child_snap: ""
            };
        }

        private selectDrwaerHandle() {
            this.selectDrawerShow = !this.selectDrawerShow;
        }

        private async showCommonPicker(title: string, key: string, snap: string, type: string, subtitle: string = "", childrenKey: string = ""): Promise<any> {
            const toast = (<any> this).$createToast({
                time: 0,
                txt: "载入选项中...",
                mask: true
            }).show();
            this.currentKey = key;
            this.currentSnap = snap;
            this.currentChilrenKey = childrenKey;
            const result = await Http.get(this.api.getParameterItem, {type});
            this.commonPicker.$updateProps({
                title: title,
                subtitle: subtitle,
                data: [CommonUnit.resultToPickerData(result.data)],
            });
            toast.hide();
            this.commonPicker.show();
        }

        private getTagText() {
            const tagList = [];
            if (this.selectValue.mate_age_snap) {
                tagList.push("年龄:" + this.selectValue.mate_age_snap);
            }
            if (this.selectValue.mate_height_snap) {
                tagList.push("身高:" + this.selectValue.mate_height_snap);
            }
            if (this.selectValue.mate_education_snap) {
                tagList.push("文化程度:" + this.selectValue.mate_education_snap);
            }
            if (this.selectValue.mate_income_snap) {
                tagList.push("收入:" + this.selectValue.mate_income_snap);
            }
            if (this.selectValue.mate_province_snap) {
                tagList.push("居住地:" + this.selectValue.mate_province_snap + "," + this.selectValue.mate_city_snap);
            }
            if (this.selectValue.mate_marital_snap) {
                tagList.push("婚姻:" + this.selectValue.mate_marital_snap);
            }
            if (this.selectValue.mate_housing_snap) {
                tagList.push("房产:" + this.selectValue.mate_housing_snap);
            }
            if (this.selectValue.mate_child_snap) {
                tagList.push("小孩:" + this.selectValue.mate_child_snap);
            }
            this.tagList = tagList;

        }

    }
</script>

<style scoped lang="stylus">
    .view
        position relative;
        width 100vw;
        height calc(100vh - 47px - var(--safe-area-inset-bottom));
        background $theme-page-common-background-color;

        .box
            height calc(100vh - 47px - var(--safe-area-inset-bottom));
            background-color #fff;

            &::before
                display table;
                content '';

            .search-nav
                height 44px;
                width 100vw;
                padding-top var(--safe-area-inset-top);
                display flex;
                justify-content center
                align-items center
                box-sizing content-box
                color #ec6786;
                border-bottom 1px solid #dedede;

                .search-btn
                    position absolute;
                    padding 0 20px;
                    height 35px;
                    font-size 13px;
                    line-height 35px;
                    right 0;


            .none-single
                margin-top calc((100vh - 47px) / 4 - 20px);
                text-align center;

            .scroll
                height calc(100vh - 47px - var(--safe-area-inset-bottom) - 44px - var(--safe-area-inset-top))

                .tag-list
                    height 40px;
                    background #fff;
                    display flex;
                    align-items center
                    flex-wrap wrap
                    padding 0 10px
                    border-bottom 1px solid $theme-line-color;

                    span
                        padding 3px 4px;
                        border-radius 2px;
                        font-size 10px

                        &.tag
                            margin-right 5px;
                            background #ec6786;
                            color #fff

                .list-wrapper
                    .list-item
                        margin 10px 7px;
                        padding-bottom 10px;
                        justify-content: space-around;
                        align-items center;
                        border-bottom 1px solid $theme-line-color;

                        .avatar
                            width 70px;
                            height 70px;
                            border-radius 50%;
                            position relative;

                            img
                                width 70px;
                                height 70px;
                                border-radius 50%;

                        .info
                            width calc(100vw - 85px - 14px - 70px);
                            line-height 24px;

                            .nickname
                                svg
                                    font-size 20px;

                            .factor
                                span
                                    padding 0 5px;
                                    border-right 1px solid $theme-line-color;

                                    &:last-child
                                        border-right none;

                                    &:first-child
                                        padding-left 0;

                            .hobby
                                span
                                    padding 0 5px;

                                    &:last-child
                                        border-right none;

                                    &:first-child
                                        padding-left 0;

                            .rank
                                color $theme-viceColor-font;

                                svg
                                    font-size 18px;

                            .intro
                                color $theme-viceColor-font;

                        .apply
                            width 70px;
                            border 1px solid $theme-common-color;
                            padding 8px 0;
                            border-radius 7px;
                            text-align center;
                            color $theme-common-color;


</style>

